<template>
    <uxt-page :title="title">
        <uxt-bar-group title="设置">
            <uxt-input-bar title="步骤定义" desc="steps" type="textarea"></uxt-input-bar>
        </uxt-bar-group>
        <uxt-bar-group title="展示">
            <uxt-steps :step="step" :steps="steps1" bg-color="white" classes="padding"></uxt-steps>
        </uxt-bar-group>
        <uxt-bar classes="margin-top-sm" title="基本用法">
            <template slot="right">
                <uxt-button @click="next" radius>下一步</uxt-button>
            </template>
        </uxt-bar>
        <uxt-steps :step="step" :steps="steps1" bg-color="white" classes="padding"></uxt-steps>
        <uxt-steps
            :step="step"
            :steps="steps2"
            bg-color="white"
            classes="padding margin-top-xs"
            color="green"
        ></uxt-steps>
        <uxt-bar classes="margin-top-sm" desc="arrow" title="箭头连接">
            <template slot="right">
                <uxt-button @click="next" bg-color="red" radius>下一步</uxt-button>
            </template>
        </uxt-bar>
        <uxt-steps
            :step="step"
            :steps="steps2"
            arrow
            bg-color="white"
            classes="padding"
            color="red"
        ></uxt-steps>
        <uxt-bar classes="margin-top-sm" title="数字图标">
            <template slot="right">
                <uxt-button @click="next" bg-color="yellow" radius>下一步</uxt-button>
            </template>
        </uxt-bar>
        <uxt-steps
            :step="step"
            :steps="steps3"
            bg-color="white"
            classes="padding"
            color="yellow"
        ></uxt-steps>
        <uxt-bar classes="margin-top-sm" title="长步骤">
            <template slot="right">
                <uxt-button @click="next4" bg-color="cyan" radius>下一步</uxt-button>
            </template>
        </uxt-bar>
        <uxt-steps
            :step="step4"
            :steps="steps4"
            bg-color="white"
            classes="padding"
            color="cyan"
        ></uxt-steps>
    </uxt-page>
</template>

<script>
import uxtButton from '@xtcoder/uxt/components/uxt-button.vue'
import uxtSteps from '@xtcoder/uxt/components/uxt-steps.vue'
import uxtBarGroup from '@xtcoder/uxt/components/uxt-bar-group.vue'
import uxtBar from '@xtcoder/uxt/components/uxt-bar.vue'
import uxtRadio from '@xtcoder/uxt/components/uxt-radio.vue'
import uxtSwitch from '@xtcoder/uxt/components/uxt-switch.vue'
import uxtInput from '@xtcoder/uxt/components/uxt-input.vue'
import uxtInputBar from '@xtcoder/uxt/components/uxt-input-bar.vue'
import uxtCheckbox from '@xtcoder/uxt/components/uxt-checkbox.vue'
import uxtSingleSelectorBar from '@xtcoder/uxt/components/uxt-single-selector-bar.vue'
import uxtColorSelectorBar from '@xtcoder/uxt/components/uxt-color-selector-bar.vue'

export default {
    components: {
        uxtButton,
        uxtSteps,
        uxtBarGroup,
        uxtBar,
        uxtRadio,
        uxtSwitch,
        uxtInput,
        uxtInputBar,
        uxtCheckbox,
        uxtSingleSelectorBar,
        uxtColorSelectorBar
    },
    data() {
        return {
            title: '步骤条',
            step: 0,
            steps1: [
                { iconed: 'square', text: '开始' },
                { iconed: 'dot-circle-o', text: '等待' },
                { iconed: 'times-circle', text: '错误' },
                { iconed: 'check-circle', text: '完成' }
            ],
            steps2: [
                { icon: 'square', iconed: 'square', text: '开始' },
                { icon: 'dot-circle-o', iconed: 'dot-circle-o', text: '等待' },
                {
                    icon: 'times-circle',
                    iconed: 'times-circle',
                    text: '错误'
                },
                {
                    icon: 'check-circle',
                    iconed: 'check-circle',
                    text: '完成'
                }
            ],
            steps3: [
                { icon: 1, iconed: 'check-circle', text: '开始' },
                { icon: 2, iconed: 'check-circle', text: '等待' },
                { icon: 3, iconed: 'check-circle', text: '错误' },
                { icon: 4, iconed: 'check-circle', text: '完成' }
            ],
            step4: 0,
            steps4: [
                { icon: 1, iconed: 'check-circle', text: '第1步' },
                { icon: 2, iconed: 'check-circle', text: '第2步' },
                { icon: 3, iconed: 'check-circle', text: '第3步' },
                { icon: 4, iconed: 'check-circle', text: '第4步' },
                { icon: 5, iconed: 'check-circle', text: '第5步' },
                { icon: 6, iconed: 'check-circle', text: '第6步' },
                { icon: 7, iconed: 'check-circle', text: '第7步' },
                { icon: 8, iconed: 'check-circle', text: '第8步' },
                { icon: 9, iconed: 'check-circle', text: '第9步' }
            ]
        }
    },
    methods: {
        next() {
            this.step++
            if (this.step === 4) {
                this.step = 0
            }
        },
        next4() {
            this.step4++
            if (this.step4 === 9) {
                this.step4 = 0
            }
        }
    }
}
</script>

<style lang="scss" scoped></style>
